<template>
    <div>
      <table-expand
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :action="action"
        :pageAdditionalAction="pageAdditionalAction"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-expand>
      <read-modal
        v-bind="readPanel"
        :modelType="modelType"
        :columns="columns"
        :rules="rules"
        :zIndex="zIndex"
      ></read-modal>
      <bind-person
          :personPanel="addNewPanel"
          :isSingleCheck="isSingleCheck"
          :selectionData="selectionData"
          @submit="handleSelectSubmit">
      ></bind-person>
    </div>
</template>
  <script>
    import readModal from '@/pages/components/readModal.vue';
    import bindPerson from '@/pages/components/bindPerson.vue';
    import tableExpand from '@/pages/components/tableExpand.vue';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
    import columnsMixin from './deptPersonConfig'
    export default {
        components: { readModal, bindPerson, tableExpand },
        name: 'deptPersonContent',
        mixins: [mixin,columnsMixin],
        props: {
            deptClassObject: {
                default: () => {
                    return null;
                }
            },
            deptClassName: {
                default: () => {
                    return '';
                }
            },
            deptType: {
                default: () => {
                    return '';
                }
            },
            deptModelType: {
                default: () => {
                    return '';
                }
            },
            ids: {
                default: () => {
                    return [];
                }
            },
            currentNode: {
                default: () => {
                    return {
                        id: 'root',
                        title: '未选中'
                    };
                }
            },
            addNewPanel: {
                width: 1024,
                zIndex: 100,
                titleStyle: {},
                drawer: {
                    show: false
                },
                cols: 2
            }
        },
        data () {
            return {
                collectionObject: null, // 所有人员实例
                modelType: typeClassName['person'].modelType, // 选择人员
                type: typeClassName['person'].type, // 人员type
                className: typeClassName['person'].className, // 人员className
                selectionData: [],
                isSingleCheck: false,
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                rules: {
                    sf_code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ]
                },
                loading: false,
                action: {
                    edit: false,
                    delete: true,
                    detail: true
                },
                config: {
                    search: true,
                    addButton: false,
                    batchDeleteButton: false,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: true,
                    additionalAction: false,
                    pageAdditionalAction: true
                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
                zIndex: 1000,
                genderOptions:[{ label: '男', value: 'male' }, { label: '女', value: 'female' }],
            };
        },
        computed: {
            pageAdditionalAction () {
                return {
                    width: 200,
                    align: 'center',
                    buttons: [
                        { title: {
                              'zh-CN': '绑定人员',
                              'en-US': 'bind person'
                          }[this.G_Locale],
                          event: (row, index) => this.bindPerson(row, index)
                        }
                    ]
                }
            },
            additionalAction () {
                return [];
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        return {
                            ...d,
                            ...d.values
                        }
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
        },
        mounted () {},
        methods: {
            loadPage (pageNavigation=this.pageNavigation, filter=null) {
                //删除查询项中属性值为空的查询条件
                this.tools.deleteInvalid(filter)
                filter = {
                    className: this.className,
                    type: this.type,
                    ...filter
                }
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = this.collectionObject.util.getFilter(filter);
                    newFilter = this.combineFilter(this.ids, newFilter)
                }
                this.loading = true;
                this.collectionObject
                    .queryByPage(
                        pageNavigation.pageNumber,
                        pageNavigation.pageSize,
                        newFilter
                    )
                    .then((flag) => {
                        if (flag) {
                            this.pageNavigation.total = this.collectionObject.total;
                            this.loading = false;
                        } else {
                            this.loading = false;
                        }
                });
            },
            bindPerson () {
                if (this.currentNode.id === 'root') {
                    this.$Message.warning('请选择部门');
                    return;
                }
                this.$set(this.addNewPanel.drawer, 'show', true)
            },
            handleSelectSubmit (selection) {
                this.$emit('bindPersonSubmit', selection)
            },
            // 查看人员信息
            handleDetail (row, index) {
                this.$set(this.readPanel, 'data', row);
                this.$set(this.readPanel.drawer, 'show', true);
            },
            // 解绑/删除人员
            handleDelete (row, index) {
                let _this = this;
                this.$Modal.confirm({
                    title: this.lang['confirmDelete'],
                    cancelText: this.lang['cancel'],
                    onOk () {
                        _this.$emit('unbindPerson', [String(row.id)])
                    }
                })
            },
            handleDeleteMultiple (selection) {
                let _this = this;
                this.$Modal.confirm({
                    title: this.lang['confirmDelete'],
                    cancelText: this.lang['cancel'],
                    onOk () {
                        let ids = [];
                        selection.map((item) => ids.push(String(item.id)));
                        _this.$emit('unbindPerson', ids)
                    }
                })
            },
            combineIds (ids) {
                return (ids.length > 0 ? "'" + ids.join("','") + "'" : '');
            },
            combineFilter (ids, filter) {
                filter += ids.length > 0 ? `&&id in (${this.combineIds(this.ids)})` : `&&id in ('')`
                return filter;
            }
        }
    };
  </script>
  <style scoped lang="scss"></style>
